<template>
  <div class="home">
    <ul class="con_nav">
      <li>
        <img src="../assets/image/icon.png" alt="" />
        <p>签到</p>
      </li>
      <li>
        <img src="../assets/image/icon.png" alt="" />
        <p>礼券</p>
      </li>
      <li>
        <img src="../assets/image/icon.png" alt="" />
        <p>砍价</p>
      </li>
      <li>
        <img src="../assets/image/icon.png" alt="" />
        <p>专栏</p>
      </li>
    </ul>

    <my-button type="info">注册</my-button>
    <my-button round>默认</my-button>

    <my-input v-model="username"></my-input>
    <my-input v-model="password"></my-input>
    <my-button round type="success" @click.native="logins">登陆</my-button>
    <!-- 因为是给组件加的原生的事件 所以要加native -->

    <!-- v-model是input事件和 ：value的合写 -->
    <!-- <h1>{{ val }}</h1> -->
  </div>
</template>

<style lang="scss" scoped>
.box {
  width: 2rem;
  height: 2rem;
  background: red;
}
.con_nav {
  width: 100%;
  display: flex;
  li {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 1rem;
      height: 0.88rem;
    }
    p {
      margin-top: 0.12rem;
      font-size: 0.4rem;
    }
  }
}
</style>
<script>
import { getbanner, login, ceshi } from "@/utils/api/home.js";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  mounted() {
    getbanner().then((res) => {
      console.log(res);
    });

    ceshi();
  },
  methods: {
    logins() {
      console.log(11);
      login({ mobile: this.username, pwd: this.password }).then((res) => {});
    },
  },
};
</script>
